<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高德定位服务</title>
    <style>
        /* 保持原有样式不变 */
        body { font-family: 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 20px; background: #f5f5f5; }
        .container { max-width: 800px; margin: 0 auto; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 25px; }
        #map-container { height: 400px; margin: 20px 0; border-radius: 6px; overflow: hidden; }
        .info-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }
        .info-card { padding: 15px; background: #f8f9fa; border-radius: 6px; }
        button { background: #0089ff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <h2>实时位置追踪</h2>
        
        <div class="info-panel">
            <div class="info-card">
                <h4>定位信息</h4>
                <p id="coordinates">正在获取坐标...</p>
                <p id="accuracy">定位精度：-- 米</p>
            </div>
            <div class="info-card">
                <h4>位置详情</h4>
                <p id="address">正在解析地址...</p>
            </div>
        </div>

        <div id="map-container"></div>
        
        <div style="text-align: center;">
            <button onclick="initLocation()">刷新位置</button>
        </div>
    </div>

    <!-- 高德地图API -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=aea94b6d4d3a04ed76edc4fcaaa92c7f"></script>
    
    <script>
        let mapInstance = null;  // 地图实例
        let marker = null;       // 地图标记

        // 初始化地图
        function initMap(lng, lat) {
            if (!mapInstance) {
                mapInstance = new AMap.Map('map-container', {
                    zoom: 16,
                    center: [lng, lat],
                    mapStyle: 'amap://styles/light'
                });
            }
            updatePosition(lng, lat);
        }

        // 更新位置信息
        function updatePosition(lng, lat) {
            // 更新坐标显示
            document.getElementById('coordinates').innerHTML = `
                经度: ${lng.toFixed(6)}<br>
                纬度: ${lat.toFixed(6)}
            `;

            // 更新地图显示
            if (mapInstance) {
                mapInstance.setCenter([lng, lat]);
                if (!marker) {
                    marker = new AMap.Marker({
                        position: [lng, lat],
                        map: mapInstance
                    });
                } else {
                    marker.setPosition([lng, lat]);
                }
            }

            // 使用高德逆地理编码
            AMap.plugin('AMap.Geocoder', () => {
                const geocoder = new AMap.Geocoder();
                geocoder.getAddress([lng, lat], (status, result) => {
                    if (status === 'complete' && result.regeocode) {
                        const address = result.regeocode.formattedAddress;
                        document.getElementById('address').innerHTML = address;
                    }
                });
            });
        }

        // 浏览器定位
        function initLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    position => {
                        // WGS84转高德坐标系
                        const wgs84togcj02 = (lng, lat) => {
                            const PI = Math.PI;
                            const a = 6378245.0;
                            const ee = 0.00669342162296594323;
                            
                            let dlat = lat - 35.0;
                            let dlng = lng - 105.0;
                            
                            let radlat = lat / 180.0 * PI;
                            let magic = Math.sin(radlat);
                            magic = 1 - ee * magic * magic;
                            let sqrtmagic = Math.sqrt(magic);
                            
                            dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
                            dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
                            
                            return {
                                lng: lng - dlng,
                                lat: lat - dlat
                            };
                        };

                        const { longitude, latitude } = position.coords;
                        const converted = wgs84togcj02(longitude, latitude);
                        initMap(converted.lng, converted.lat);
                        document.getElementById('accuracy').textContent = 
                            `定位精度：${position.coords.accuracy.toFixed(1)}米`;
                    },
                    error => {
                        console.error('定位失败:', error);
                        alert('定位服务不可用，请检查权限设置');
                    },
                    { enableHighAccuracy: true, timeout: 5000 }
                );
            } else {
                alert("您的浏览器不支持地理定位功能");
            }
        }

        // 页面加载自动定位
        window.onload = initLocation;
    </script>
</body>
</html>